<template>
<div class="dataview">
    <el-card>
        <div id="main1"></div>
    </el-card>
    <el-card>
        <div id="main2"></div>
    </el-card>
</div>
</template>
<script>
import  { dataview } from '@/API/api.js';
export default{
data() {
    return {

    }
},
created(){
        dataview().then(res =>{
            console.log(res);
            if(res.status === 200) {
                let {legend,series,xAxis} = res.data
                this.draw(legend,series,xAxis)
            }
        })
},
mounted(){
    let myChart = this.$echarts.init(document.getElementById('main1'))
    myChart.setOption({
          title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
    })
},
        methods:{
            draw(legend,series,xAxis){
                 let myChart1 = this.$echarts.init(document.getElementById('main2'))
        let option = {
            title: {
                text:'回话量'
            },
            tooltip:{
                trigger:'axis'
            },
            legend:{
                data:legend
            },
            xAxis:{
                type:'category',
                data:xAxis
            },
            yAxis:{
                type:'value'
            },
            series:series
        }
        myChart1.setOption(option);
            }
        }
}
</script>
<style scoped lang="scss">
.dataview{
    display: flex;
    // align-items: center;
}
#main1{
    width:600px;
    height:400px;
    // background-color: red;
}
#main2{
    width:600px;
    height:400px;
}
</style>